.container-1 {
    display: grid;
    grid-template-columns: 50px auto 50px;
    grid-template-rows: 50px 50px 50px;
    gap: 5px;
    justify-items: start;
    align-items: stretch;
    grid-auto-flow: column;
    background-color: lightblue;
}

.container-2 {
    display: grid;
    grid-template-columns: 50px auto 50px;
    grid-template-rows: 50px 50px 50px;
    gap: 5px;
    justify-items: start;
    align-items: center;
    background-color: lightblue;
}

.container-3 {
    display: grid;
    grid-template-columns: 50px auto 50px;
    grid-template-rows: 50px 50px 50px;
    gap: 10px;
    justify-items: stretch;
    align-items: center;
    grid-auto-flow: column;
    background-color: lightblue;
}

.container-4 {
    display: grid;
    grid-template-columns: 50px auto 50px;
    grid-template-rows: 50px 50px 50px;
    gap: 10px;
    justify-content: stretch;
    align-content: center;
    grid-auto-flow: column;
    background-color: lightblue;
}

.item-1 {
    justify-self: start;
    background-color: burlywood;
}

.item-2 {
    justify-self: center;
    background-color: aqua;
}

.item-3 {
    justify-self: end;
    background-color: yellow;
}

.item-4 {
    align-self: start;
    background-color: yellowgreen;
}

.item-5 {
    align-self: center;
    background-color: violet;
}

.item-6 {
    align-self: end;
    background-color: turquoise;
}

.item-7 {
    /* grid-column: 1/3; */
    background-color: thistle;
}

.item-8 {
    /* grid-row: 1/4; */
    background-color: slateblue;
}

.item-9 {
    background-color: cornflowerblue;
}